<template>
    <div class="gift-panel">
      <p class="text-center"><a href="#" class="color-gray">服务声明</a></p>
      <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        <swiper-slide v-for="(item, index) in showLists" :key="index">
          <div class="gift-panel-row text-center clearfix">
            <div class="gift-list-item" v-for="(detailItem, n) in item" :key="n">
              <img :src="detailItem.image" alt="">
              <p class="color-dark-gray">{{detailItem.name}}</p>
              <p class="color-gray">{{detailItem.price}}元</p>
            </div>
          </div>
        </swiper-slide>
        <!-- <swiper-slide>
          <div class="gift-panel-row text-center clearfix">
            <div class="gift-list-item" v-for="i in 8" :key="i">
              <img src="./img/gift-guzhang.png" alt="">
              <p class="color-dark-gray">鼓掌2</p>
              <p class="color-gray">10.00元</p>
            </div>
          </div>
        </swiper-slide> -->
        <div class="swiper-pagination swiper-pagination-gift"  slot="pagination"></div>
      </swiper>

      <div class="gift-panel-options">
        <form action="#">
          <div class="form-inline">
            数量<div class="gift-select gift-select-nums" @click="showNumsPicker = true"><p>{{nums[selectedNumIndex]}}</p></div>
            送给<div class="gift-select gift-select-name" @click="showNamePicker = true"><p>{{names[selectedNameIndex]}}</p></div>
            <button type="button" class="lm-button" @click="giveGifts">赠送</button>
          </div>
        </form>
      </div>

      <van-picker 
        :columns="nums" 
        :default-index="selectedNumIndex"
        @change="onChangeNums" 
        v-show="showNumsPicker" 
      />

      <van-picker 
        :columns="names" 
        :default-index="selectedNameIndex"
        @change="onChangeName" 
        v-show="showNamePicker" 
      />
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: ['giftLists'],
  data() {
    return {
      showNumsPicker: false,
      selectedNumIndex: 13,
      nums: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,66,88,99],
      showNamePicker: false,
      selectedNameIndex: 0,
      names: ['大鱼艺术教育','沪江英语'],
      swiperOption: {
        notNextTick: true,
        scrollbar: {scrollbarHide: true},
        pagination: {
            el: '.swiper-pagination',
            bulletElement: 'span',
            type : 'bullets'
        }
      }
    };
  },
  computed: {
    showLists(){
      let giftArray = [];
      if(this.giftLists.length <= 8) return [this.giftLists];
      this.giftLists.forEach((item, index)=>{
        let page = Math.floor(index / 8);
        if(!giftArray[page]) giftArray[page] = [];

        giftArray[page].push(item);
      });

      return giftArray;
    }
  },
  methods: {
    onChangeNums(picker, value, index){
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.selectedNumIndex = index;
      this.showNumsPicker = false;
    },
    onChangeName(picker, value, index){
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.selectedNameIndex = index;
      this.showNamePicker = false;
    },
    giveGifts(){
      let nums = this.nums.find((item, index)=>{ return index == this.selectedNumIndex; });
      let name = this.names.find((item, index)=>{ return index == this.selectedNameIndex; });
      console.log(nums, name)
      this.$emit('give-gifts', {nums, name});
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.gift-panel {
  border-top: 1px solid #fefffe;
  background-color: $color-white;
  z-index: 180;

  > p:nth-of-type(1) {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 24px;
    

  }

  .gift-panel-row {
    font-size: 24px;
    .gift-list-item{
      float: left;
      width: 25%;
      margin-bottom: 30px;
    }
    img { width: 88px; height: 88px; }
    > p {
      line-height: 24px;
    }
  }


  .gift-panel-options {
    padding: 12px 0 10px 35px;
    
    font-size: 28px;
    background-color: #f7f7f7;

    .lm-button{
      width: 120px;
      height: 70px;
      line-height: 70px;
      color: $color-white;
      background-color: #fcba2e;
      border-radius: 35px;
    }
  }
  .gift-select {
    display: inline-block;
    height: 76px;
    padding: 0 20px;
    margin-left: 10px;
    margin-right: 30px;
    font-size: 26px;
    line-height: 76px;
    color: #333;
    background-color: #fff;
    position: relative;
    &.gift-select-nums{
      width: 148px;
      padding: 0 60px 0 20px;
    }

    &.gift-select-name {
      width: 228px;
      padding: 0 60px 0 10px;
    }
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 18px;
      border-width: 20px 14px 0 14px;
      border-color: #666 transparent transparent transparent;
      border-style: solid;
      transform: translate3d(0, -50%, 0);
    }
  }

  .gift-panel-gift {
    line-height: 32px;
    height: 32px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    span {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 16px;
      font-size: 0;
      vertical-align: middle;
      border-radius: 100%;
      background-color: #666;
      &:last-child{margin-right: 0;}
      &.active{ background-color: #333;}
    }
  }
}

.swiper-pagination-gift {
    padding-bottom: 20px;
    font-size: 0;
    line-height: 36px;
    text-align: center;
    position: static !important;
}
</style>